<template>
  <div
    v-if="boundingRect && activeTool"
    :style="{
      mixBlendMode: blendMode,
      pointerEvents: 'none',
      position: 'absolute',
      inset: 0,
    }"
  >
    <Highlight
      v-if="activeTool.defaults.type === PdfAnnotationSubtype.HIGHLIGHT"
      :color="activeTool.defaults.color"
      :opacity="activeTool.defaults.opacity"
      :segmentRects="rects"
      :scale="scale"
    />
    <Underline
      v-else-if="activeTool.defaults.type === PdfAnnotationSubtype.UNDERLINE"
      :color="activeTool.defaults.color"
      :opacity="activeTool.defaults.opacity"
      :segmentRects="rects"
      :scale="scale"
    />
    <Strikeout
      v-else-if="activeTool.defaults.type === PdfAnnotationSubtype.STRIKEOUT"
      :color="activeTool.defaults.color"
      :opacity="activeTool.defaults.opacity"
      :segmentRects="rects"
      :scale="scale"
    />
    <Squiggly
      v-else-if="activeTool.defaults.type === PdfAnnotationSubtype.SQUIGGLY"
      :color="activeTool.defaults.color"
      :opacity="activeTool.defaults.opacity"
      :segmentRects="rects"
      :scale="scale"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onUnmounted, watchEffect, computed } from 'vue';
import { blendModeToCss, PdfAnnotationSubtype, PdfBlendMode, Rect } from '@embedpdf/models';
import { AnnotationTool } from '@embedpdf/plugin-annotation';
import { useSelectionCapability } from '@embedpdf/plugin-selection/vue';
import { useAnnotationCapability } from '../hooks';
import Highlight from './text-markup/highlight.vue';
import Underline from './text-markup/underline.vue';
import Strikeout from './text-markup/strikeout.vue';
import Squiggly from './text-markup/squiggly.vue';

const props = defineProps<{
  pageIndex: number;
  scale: number;
}>();

const { provides: selectionProvides } = useSelectionCapability();
const { provides: annotationProvides } = useAnnotationCapability();
const rects = ref<Rect[]>([]);
const boundingRect = ref<Rect | null>(null);
const activeTool = ref<AnnotationTool | null>(null);

watchEffect((onCleanup) => {
  const unsubscribers: (() => void)[] = [];

  if (selectionProvides.value) {
    const provides = selectionProvides.value;
    const off = provides.onSelectionChange(() => {
      rects.value = provides.getHighlightRectsForPage(props.pageIndex);
      boundingRect.value = provides.getBoundingRectForPage(props.pageIndex);
    });
    unsubscribers.push(off);
  }

  if (annotationProvides.value) {
    const provides = annotationProvides.value;
    const off = provides.onActiveToolChange((tool) => (activeTool.value = tool));
    unsubscribers.push(off);
  }

  onCleanup(() => {
    unsubscribers.forEach((unsub) => unsub());
  });
});

const blendMode = computed(() => {
  if (!activeTool.value) return blendModeToCss(PdfBlendMode.Normal);
  const defaultMode =
    activeTool.value.defaults.type === PdfAnnotationSubtype.HIGHLIGHT
      ? PdfBlendMode.Multiply
      : PdfBlendMode.Normal;
  return blendModeToCss(activeTool.value.defaults.blendMode ?? defaultMode);
});
</script>
